<template>
  <div style="position: relative; height: 99.9%">
    <breadcrumb></breadcrumb>
    <div class="Box">
      <div class="header">
        <h2 style="
            font-size: 16px;
            color: #262626;
            font-family: MicrosoftYaHei-Bold;
          ">
          {{ orderId ? "修改计划订单" : "计划创建订单" }}
        </h2>
      </div>
      <div class="main">
        <div class="main_item">
          <titleBgVue :title="'计划信息'"></titleBgVue>
          <el-form :model="formData" :rules="SchedulingRules" ref="transactionForm" label-width="117px"
            class="input_form">
            <el-row style="width: 100%">
              <el-col :span="8">
                  <el-form-item label="计划名称" prop="ownerProject">
                    <el-input size="small" v-model="formData.ownerProject" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              <el-col :span="8">
                <el-form-item label="每月/每周" prop="typeDate">
                  <el-select v-model="formData.typeDate" placeholder="请选择">
                    <el-option v-for="item in typeDateArr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="星期选择(每周)" prop="weekDay" v-if="formData.typeDate == '周'">
                  <el-select v-model="formData.weekDay" placeholder="请选择">
                    <el-option v-for="item in weekArr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="日期选择(每月)" prop="MonthDate" v-else-if="formData.typeDate == '月'">
                  <el-select v-model="formData.MonthDate" placeholder="请选择">
                    <el-option v-for="item in MonthDateArr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="时分秒" prop="pointTime">
                  <el-time-picker value-format="HH:mm:ss" v-model="formData.pointTime" placeholder="任意时间点">
                  </el-time-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>


        </div>
        <!-- 交易信息板块 -->
        <div class="main_item">
          <titleBgVue :title="'交易信息'"></titleBgVue>

          <div class="formItem">
            <el-form :model="formData" :rules="SchedulingRules" ref="transactionForm" label-width="117px"
              class="input_form">
              <el-row style="width: 100%">
                <el-col :span="8">
                  <el-form-item label="货源方" prop="ownerId">
                    <el-input size="small" :readOnly="true" v-model="transactionForm.huozhu" placeholder="请选择货源方">
                      <template slot="append">
                        <div style="cursor: pointer" @click="Selectcargoe">
                          选择货主
                        </div>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="项目名称" prop="projectId">
                    <el-input size="small" v-model="transactionForm.name" :readOnly="true" placeholder="请选择项目">
                      <template slot="append">
                        <div style="cursor: pointer" @click="Selectitem">
                          选择项目
                        </div>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                
                <el-col :span="8">
                  <el-form-item label="计价方式" prop="pricingMethod">
                    <el-select size="small" v-model="formData.pricingMethod" placeholder="请选择">
                      <el-option v-for="item in jijiaArr" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计量单位" prop="measureUnit">
                    <el-select size="small" v-model="formData.measureUnit" placeholder="请选择" @change="changeMeasureUnit">
                      <el-option v-for="item in jiliangdawei" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
									<el-form-item label="车队类型" prop="fleetType">
										<el-select size="small" v-model="formData.fleetType" placeholder="请选择"
											@change="changefleettype">
											<el-option v-for="item in chedui" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col> -->
                <el-col :span="8">
                  <el-form-item label="运量" prop="cargoWeight">
                    <el-input size="small" v-model="formData.cargoWeight" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="货主单价">
                    <el-input size="small" v-model="formData.ownerUnitPrice" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="货主金额">
                    <el-input size="small" v-model="formData.totalAmount" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>


              </el-row>
            </el-form>
          </div>
        </div>
        <div class="main_item" v-if="type == 2">
          <titleBgVue :title="'订单信息驳回反馈'"></titleBgVue>
          <el-upload class="upload-demo" drag multiple :action="url" :show-file-list="false" :headers="headers"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
          <div style="font-size: 15px; color: #3ebbec">{{ suffixName }}</div>
          <div style="width: 400px; margin-top: 15px">
            <el-input type="textarea" :rows="2" placeholder="请输入反馈备注" v-model="remark">
            </el-input>
          </div>
        </div>
        <!-- 收发货信息板块 -->
        <div class="main_item" v-if="type != 2">
          <titleBgVue :title="'收发货信息'"></titleBgVue>
          <div class="formItem">
            <el-form :model="ShippingReceivingInfoForm" :rules="ShippingReceivingInfoRules" label-width="117px"
              class="input_form">
              <el-row>
                <el-col :span="24">
                  <el-col :span="8">
                    <el-form-item label="选择路线" prop="selection">
                      <el-input size="small" :readOnly="true" v-model="ShippingReceivingInfoForm.selection"
                        placeholder="请选择路线">
                        <template slot="append">
                          <div style="cursor: pointer" @click="Selectline">
                            选择路线
                          </div>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="8">
                      <el-form-item label="距离(公里)" prop="Distance">
                        <el-input v-model="ShippingReceivingInfoForm.Distance" :disabled="true"></el-input>
                      </el-form-item>
                    </el-col> -->
                </el-col>

                <el-col :span="24">
                  <el-form-item class="reddian" label="发货地" prop="setOut">
                    <!-- 发货地表格 -->
                    <el-table :data="start" style="width: 100%; border: 1px solid #f0f0f0"
                      :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle">
                      <el-table-column align="left" prop="" width="50" label="序号">
                        <template slot-scope="scope">
                          <div>
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">地址</div>
                        </template>
                        <template slot=""></template>
                        <template slot-scope="scope">
                          <div @click="AddMap(scope.$index, 0, scope.row.address)">
                            <el-input size="small" :readonly="true" v-model="scope.row.address" placeholder="请选择地址">
                            </el-input>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="详细门牌号" align="center">
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.detail" placeholder="请输入详细门牌号">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contact" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系人</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.contact" placeholder="请输入联系人">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系电话</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.phone" placeholder="请输入联系电话">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <i class="iconfontcolor icon-a- pointerStyle" v-if="scope.$index == 0" @click="addCargo(0)"></i>
                          <i class="iconfontcolor icon-a-- pointerStyle" @click="DeletCargo(scope.$index, 0)" v-else></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="reddian" label="目的地" prop="setOut">
                    <!--目的地表格 -->
                    <el-table :data="end" style="width: 100%; border: 1px solid #f0f0f0"
                      :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle">
                      <el-table-column align="left" prop="" width="50" label="序号">
                        <template slot-scope="scope">
                          <div>
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">地址</div>
                        </template>
                        <template slot-scope="scope">
                          <div @click="AddMap(scope.$index, 1, scope.row.address)">
                            <el-input :readonly="true" v-model="scope.row.address" size="small" placeholder="请选择地址">
                            </el-input>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="detail" label="详细门牌号" align="center">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.detail" size="small" placeholder="请输入详细门牌号">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contact" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系人</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.contact" size="small" placeholder="请输入联系人">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系电话</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.phone" size="small" placeholder="请输入联系电话">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" label="货物明细" align="center">
                        <template slot-scope="scope">
                          <div style="font-size: 20px">
                            <el-button type="text" size="small" @click="cargoVisible(scope.$index)"
                              style="font-size: 15px">编辑货物明细</el-button>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <i class="iconfontcolor icon-a- pointerStyle" v-if="scope.$index == 0" @click="addCargo(1)"></i>
                          <i class="iconfontcolor icon-a-- pointerStyle" @click="DeletCargo(scope.$index, 1)" v-else></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <!-- 调度信息板块 -->
        <div class="main_item" v-show="type != 2">
          <titleBgVue :title="'调度信息'"></titleBgVue>
          <div class="formItem">
            <!-- :model="formData"  两个表单 绑定 重赋数据对象 导致表单验证组件不可用 -->
            <el-form :model="formData" :rules="SchedulingRules" ref="SchedulingForm" label-width="117px"
              class="input_form">
              <el-row style="width: 100%">
                <el-col :span="24">
                  <el-form-item label="车型" prop="carType" class="carTypeSelect">
                    <el-select placeholder="请选择" size="small" v-model="SchedulingForm.carType" @change="changeArr">
                      <el-option v-for="item in carTypeArr" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <div class="carPicBox" v-show="CarData">
                      <div class="imgBg">
                        <img class="carPic" :src="CarData.image" />
                      </div>

                      <div class="infoBox">
                        <div class="info_item">
                          <span class="info_item_tit">载重</span>
                          <span class="text">{{ CarData.loads }}吨</span>
                        </div>
                        <div class="info_item">
                          <span class="info_item_tit">长高</span>
                          <span class="info_item_tit">{{ CarData.length }}*{{ CarData.height }}m</span>
                        </div>
                        <div class="info_item">
                          <span class="info_item_tit">载方</span>
                          <span class="text">{{ CarData.capacity }}方</span>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <div style="height: 230px" v-show="CarData"></div>
                <el-col :span="8">
                  <el-col :span="24">
                    <el-form-item label="订单截止时间">
                      <el-date-picker v-model="formData.endTime" size="small" type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="发货时间">
                      <el-date-picker v-model="formData.shippedTime" size="small" type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :picker-options="pickerOptionsStart">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" v-if="formData.fleetType == 2 && formData.allotState == 0">
                    <el-form-item label="车队运费" prop="supplierMoney">
                      <el-input size="small" v-model="formData.supplierMoney" placeholder="请输入运费">
                        <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                          元
                        </div>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" v-if="formData.fleetType == 1">
                    <el-form-item label="接单司机" prop="driverId">
                      <el-input v-model="transactionForm.Carrier" :clearable="true" size="small" @clear="clear"
                        :readOnly="true" placeholder="请选择接单司机">
                        <template slot="append">
                          <div style="cursor: pointer" @click="SelectAccept">
                            选择接单司机
                          </div>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="司机单价"  v-if="formData.fleetType == 1">
                      <el-input v-model="formData.unitPrice" placeholder="请输入金额" size="small">
                        <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                          元
                        </div>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="8">
                  <el-col :span="24">
                    <el-form-item label="送达时间">
                      <el-date-picker v-model="formData.finishTime" size="small" type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :picker-options="pickerOptionsEnd">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="选择车队" prop="appointSupplierId">
                      <el-input v-model="transactionForm.feetName" size="small" :readOnly="true" placeholder="请选择接单车队">
                        <template slot="append">
                          <div style="cursor: pointer" @click="SelectFeet">
                            选择接单车队
                          </div>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="司机运费"  v-if="formData.fleetType == 1">
                      <el-input size="small" v-model="formData.freight" placeholder="请输入运费">
                        <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                          元
                        </div>
                      </el-input>
                    </el-form-item>
                  </el-col>

                </el-col>
                <el-col :span="8">
                  <el-form-item label="订单备注" prop="beizhu">
                    <el-input size="small" type="textarea" resize="none" :rows="6" class="notesInput" placeholder="请输入内容"
                      v-model="formData.description" maxlength="50" show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="formData.fleetType == 2">
                  <el-col :span="24">
                    <el-form-item label="是否调度司机" prop="allotState">
                      <el-radio-group v-model="formData.allotState">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <!-- 调度司机显示 隐藏 -->
                    <el-form-item prop="DispatchingDriver">
                      <div class="addDriverBox" v-show="formData.allotState == 1">
                        <div class="addDriverBox_head">
                          <button type="button" class="addDriverBtn" @click="showAddDriverDialog()">
                            <i class="el-icon-plus iconBtn"></i>
                            <span>添加司机</span>
                          </button>
                          <span style="color: #666666; font-size: 12px">
                            该单总运量为<span style="color: #1890ff">{{
                              formData.cargoWeight ? formData.cargoWeight : 0
                            }}</span>
                          </span>
                        </div>
                        <div class="addDriverTableBox">
                          <el-table class="pointDeparture_table" :data="SchedulingForm.DispatchingDriver" show-summary
                            :header-cell-style="tableHeaderStyle2" :row-class-name="rowStyle"
                            :summary-method="getSummaries">
                            <el-table-column align="left" prop="" width="50" label="序号">
                              <template slot-scope="scope">
                                <div>
                                  {{ scope.$index + 1 }}
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column align="center" label="司机姓名" prop="driverName"></el-table-column>
                            <el-table-column align="center" label="车辆信息">
                              <template slot-scope="scope">
                                <div>
                                  {{ scope.row.vehicleInfo }}
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column align="center" label="运量" prop="cargoWeight">
                              <template slot-scope="scope">
                                <el-input size="small" @change="CalculationResults(scope.row)"
                                  v-model="scope.row.cargoWeight">
                                </el-input>
                              </template>
                            </el-table-column>
                            <el-table-column align="center" label="单位">
                              <template slot-scope="scope">
                                <el-select size="small" v-model="scope.row.measureUnit" placeholder="请选择" disabled>
                                  <el-option v-for="item in jiliangdawei" :key="item.value" :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column label="司机单价(元)" prop="unitPrice">
                              <template slot-scope="scope">
                                <el-input size="small" @change="CalculationResults(scope.row)"
                                  v-model="scope.row.unitPrice">
                                </el-input>
                              </template>
                            </el-table-column>
                            <el-table-column align="center" label="司机运费(元)" prop="freight">
                              <template slot-scope="scope">
                                <el-input size="small" v-model="scope.row.freight">
                                </el-input>
                              </template>
                            </el-table-column>
                            <el-table-column align="center" label="操作">
                              <template slot-scope="scope">
                                <i class="iconfontcolor icon-a-- pointer" @click="addDispatchDriver(scope.$index)"></i>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="footerControlBox">
      <el-button class="cancelBtn" @click="$router.push('/home/selfOperatedOrder/List')">取消</el-button>
      <el-button class="submitBtn" type="primary" @click="submit">提交</el-button>
    </div>

    <!-- 货物明细弹框 -->
    <el-dialog title="编辑货物明细" :visible.sync="cargoDetailsVisible" width="1000px" class="cargoDetails_dialog">
      <div class="head">
        <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="upload"
          :show-file-list="false" accept=".xlsx,.xls" style="width: 150px; display: inline-flex">
          <el-button class="importBtn" type="primary">导入excel文档</el-button>
        </el-upload>
        <el-button class="importBtn1" type="warning" @click="Download">下载excel模板</el-button>
        <el-button class="importBtn1" type="success" @click="AddHuo">添加货物信息</el-button>
      </div>

      <div class="tableBox">
        <el-table class="cargoDetails_table" :data="end[EndIndex].orderCargoDetails"
          :header-row-style="{ height: '40px', backgroundColor: 'red' }"
          :row-style="{ color: '#666666', fontSize: '12px' }">
          <el-table-column align="left" prop="" width="50" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="大类">
            <template slot-scope="scope">
              <el-select size="small" v-model="scope.row.cargoType" placeholder="请选择">
                <el-option v-for="item in LargeCategoryArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="货物名称">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.cargoName"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="运量" width="150px">
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input size="small" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="scope.row.cargoWeight"
                  style="width: 80px">
                </el-input>
                <el-select size="small" style="width: 70px" v-model="scope.row.measureUnit" placeholder="请选择">
                  <el-option v-for="item in measureUnitArr" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="品牌">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.brand"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="规格">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.cargoVolume">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量">
            <template slot-scope="scope">
              <el-input size="small" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="scope.row.cargoQuantity">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.description">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <i class="iconfontcolor icon-a-- pointerStyle" @click="DeleteIndex(scope.$index)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog_footer">
        <el-button class="cancelBtn3" @click="cargoDetailsVisible = false">取消</el-button>
        <el-button class="submitBtn3" type="primary" @click="cargoDetailsVisible = false">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="货主信息" :visible.sync="DialogVisible" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input placeholder="请输入货主名" clearable v-model="CargoOwnerValue">
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('货主信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="cargoemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="cargoemood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="name" label="货主名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="cargoeXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>

    <el-dialog title="项目信息" :visible.sync="DialogItem" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="projectNameValue" placeholder="请输入项目名" clearable>
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('项目信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="itemmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="itemmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="ItemXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>
    <el-dialog title="车队信息" :visible.sync="DialogFleet" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="fleetNameValue" placeholder="请输入车队名称" clearable>
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('车队信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="DialogAcceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="DialogAcceptmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="fleetName" label="承运方名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.fleetName }}<div v-if="scope.row.index == 2" class="waiFleet">{{ scope.row.index == 0 ? '内' : '外'
            }}</div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="AcceptListFleet(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
    </el-dialog>
    <el-dialog title="接单人信息" :visible.sync="DialogAcceptList" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="driverNameValue" placeholder="请输入接单人名称" clearable>
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('接单人信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <!-- <div class="null-png" v-if="Acceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div> -->
      <el-table class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Acceptmood" :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266',
      }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="driverName" label="接单人名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="AcceptListXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>

    <el-dialog title="选择路线" :visible.sync="DialogLine" center class="fpkp-dialog">
      <!-- 无数据时显示 -->
      <!-- <div class="null-png" v-if="Linemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div> -->
      <div class="controlLine">
        <div class="inputItem">
          <div class="title">路线名称</div>
          <div class="inputBox">
            <el-input v-model="searchLineName" @keyup.enter.native="Selectline">
            </el-input>
          </div>
        </div>
        <el-button type="primary" size="small" icon="el-icon-search" @click="Selectline">查询</el-button>
        <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearSelectline">清空</el-button>
      </div>
      <el-table class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Linemood" :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266',
      }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="lineName" label="名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="LineXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>
    <iframe src="/orderMap.html" ref="iframeTwo" frameborder="0" id="iframetest" width="0" height="0"></iframe>
    <div>
      <el-dialog title="线路信息" :visible.sync="DialogMap" center class="fpkp-dialog">
        <iframe src="/orderMap.html" ref="iframe" frameborder="0" id="iframetest" width="100%" height="500"></iframe>
        <div class="dialog_footer" style="width: 100%; display: flex; justify-content: flex-end">
          <el-button class="cancelBtn3" @click="DialogMap = false">取消</el-button>
          <el-button class="submitBtn3" type="primary" @click="serMap">保存</el-button>
        </div>
      </el-dialog>

      <!-- 添加司机弹框 -->
      <el-dialog title="添加司机" :visible.sync="addDriverVisible" width="840px" class="addDriver_dialog">
        <div class="titleBox">
          <div class="title">承运方当前可调动司机：</div>
        </div>
        <el-row class="flex-fpkp">
          <el-col :md="10" class="ipt-qym">
            <el-input v-model="driverNameQuery" placeholder="请输入司机名称" clearable>
            </el-input>
          </el-col>
          <el-col class="cxbt">
            <el-button type="primary" @click="queryDriver()">查询</el-button>
          </el-col>
        </el-row>


        <div class="dialog_list">
          <el-table :data="driverDetailsData" style="width: 100%" header-align="left"
            :row-style="{ color: '#595959', fontSize: '12px' }" ref="registTable">
            <el-table-column align="left" type="selection" width="50"></el-table-column>
            <el-table-column align="left" prop="" width="50" label="序号">
              <template slot-scope="scope">
                <div>
                  {{ scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="driverPic" label="司机照片">
              <template slot-scope="scope">
                <div class="driverPicBox">
                  <el-image style="width: 65px; height: 48px" :src="scope.row.driverPhoto"
                    :preview-src-list="[scope.row.driverPhoto]">
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="司机姓名">
              <template slot-scope="scope">
                <el-popover placement="bottom-start" width="505" trigger="click" class="popover"
                  @show="diverShow(scope.row.driverId)">
                  <!-- 司机信息和车辆信息 -->
                  <div class="BulletBox" v-if="diverMood">
                    <div class="info_item">
                      <div class="titleBox">
                        <div class="icon-xinxi iconfontcolor"></div>
                        <h3 class="title">司机信息</h3>
                        <div class="line"></div>
                      </div>
                      <el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
                        color: '#939393',
                        fontSize: '12px',
                        fontWeight: 'bold',
                        marginRight: '20px',
                      }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                        <el-descriptions-item label="司机姓名">{{
                          diverMood.driverName
                        }}</el-descriptions-item>
                        <el-descriptions-item label="准驾车型">{{
                          diverMood.licenseLevel.message
                        }}</el-descriptions-item>
                        <el-descriptions-item label="身份证号">{{
                          diverMood.idCard
                        }}</el-descriptions-item>
                        <el-descriptions-item label="司机年龄">{{
                          scope.row.age
                        }}</el-descriptions-item>
                      </el-descriptions>
                    </div>
                    <div class="info_item">
                      <div class="titleBox">
                        <div class="icon-xinxi iconfontcolor"></div>
                        <h3 class="title">车辆信息</h3>
                        <div class="line"></div>
                      </div>
                      <el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
                        color: '#939393',
                        fontSize: '12px',
                        fontWeight: 'bold',
                        marginRight: '20px',
                      }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                        <el-descriptions-item label="车辆类型">{{
                          diverMood.vehicleType
                        }}</el-descriptions-item>
                        <el-descriptions-item label="车牌号">{{
                          diverMood.numberplate
                        }}</el-descriptions-item>
                        <el-descriptions-item label="品牌型号">{{
                          diverMood.brandModel
                        }}</el-descriptions-item>
                        <el-descriptions-item label="规格">{{
                          diverMood.specification
                        }}</el-descriptions-item>
                        <el-descriptions-item label="参数">{{
                          diverMood.diverMood
                        }}</el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </div>
                  <div class="driverNameBox" slot="reference">
                    <div class="driverName">{{ scope.row.driverName }}</div>
                    <i class="iconfont icon-info"></i>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="age" label="年龄" width="60">
            </el-table-column>
            <el-table-column align="left" prop="phoneNumber" label="联系电话">
            </el-table-column>
            <el-table-column align="left" prop="numberplate" label="绑定车辆">
            </el-table-column>
            <el-table-column align="left" prop="vehicleType" label="准驾车型" width="80">
            </el-table-column>
          </el-table>
        </div>
        <div class="dialog_footer">
          <el-button class="cancelBtn2" @click="addDriverVisible = false">取 消</el-button>
          <el-button class="submitBtn2" type="primary" @click="driverVerify">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleBgVue from "@/components/titleBg.vue";
import BaseUrl from "@/http/BaseUrl";
import {
  read,
  utils
} from "xlsx";
import store from "@/store/index";
export default {
  data() {
    return {
      typeDateArr: [{ value: '周', label: '每周' }, { value: '月', label: '每月' }],
      weekArr: [{ value: '星期一', label: '星期一' }, { value: '星期二', label: '星期二' }, { value: '星期三', label: '星期三' }, { value: '星期四', label: '星期四' }, { value: '星期五', label: '星期五' }, { value: '星期六', label: '星期六' }, { value: '星期天', label: '星期天' }],
      MonthDateArr: [],
      suffixName: "",
      url: BaseUrl.UPLOADURL + "/file/upload",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      driverNameQuery: "",//选择外部车队后添加司机  搜索司机名称
      driverNameValue: "", //接单人信息弹框  司机名称搜索
      projectNameValue: "", //项目信息弹框 输入框项目名称
      CargoOwnerValue: "", //货主信息 搜索货主
      fleetNameValue: "", //车队信息 搜索车队名称
      supplierIdValue: "",
      driverDetailsData: "",
      searchLineName: "", //选择路线弹框 搜索路线名称
      // 发货时间限制  发货时间不大于送达时间
      // <!-- formData.shippedTime  formData.finishTime-->

      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.formData.finishTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() >
              new Date(this.formData.finishTime).getTime() -
              1 * 24 * 60 * 60 * 1000
            );
          }
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() <
            new Date(this.formData.finishTime).getTime() +
            1 * 24 * 60 * 60 * 1000
          );
        },
      },

      key: "",
      DialogLine: false,
      DialogCar: false,
      DialogMap: false,
      DialogVisible: false,
      DialogItem: false,
      DialogAcceptList: false,
      DialogFleet: false, // 车队弹框
      addDriverVisible: false, //添加司机弹框
      cargoDetailsVisible: false, //货物明细弹框
      cargoemood: [],
      itemmood: [],
      Acceptmood: [],
      DialogAcceptmood: [],
      Linemood: [],
      // 交易信息 表单数据
      transactionForm: {
        huozhu: "",
        name: "",
        jijia: "",
        plan: "",
        jiliang: "",
        yunliang: "",
        danjia: "",
        money: "",
        carrierUunitPrice: "",
        carrierMoney: "",
        feetName: "",
      },
      type: "",
      transactionRules: {
        huozhu: [{
          required: true,
          message: "请点击右侧选择",
          trigger: "blur"
        },],
        name: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        }],
        plan: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        }],
        jijia: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        }],
        jiliang: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        }],
        yunliang: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        }],
        danjia: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        }],
        money: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        }],
        carrierUunitPrice: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        },],
        carrierMoney: [{
          required: true,
          message: "请输入",
          trigger: "blur"
        }],
      },
      // 调度信息 表单数据
      SchedulingForm: {
        overTime: "",
        fahuoTime: "",
        shouHuoTime: "",
        Carrier: "",
        isDispatchingDriver: "1",
        DispatchingDriver: [],
        carType: "",
        beizhu: "",
      },

      //收发货信息
      ShippingReceivingInfoForm: {
        selection: "",
        Distance: "8",
        sendOut: [],
        destination: [],
      },
      ShippingReceivingInfoRules: {},
      // 货物明细
      LargeCategoryArr: [{
        value: 1,
        label: "建材"
      },
      {
        value: 2,
        label: "建材2"
      },
      ],
      jiliang: "",
      jiliangArr: [],
      jijia: "",
      jijiaArr: [{
        value: 1,
        label: "按里程"
      },
      {
        value: 2,
        label: "按量"
      },
      ],
      jiliangdawei: [{
        value: 1,
        label: "车"
      },
      {
        value: 2,
        label: "吨"
      },
      {
        value: 3,
        label: "件"
      },
      ],
      chedui: [{
        value: 1,
        label: "内部车队"
      },
      {
        value: 2,
        label: "外部车队"
      },
      ],
      plan: "",

      CarrierArr: [],
      carTypeArr: [],
      SchedulingRules: {
        ownerId: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        projectId: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        pricingMethod: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        ownerProject: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        measureUnit: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        cargoWeight: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        unitPrice: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        totalAmount: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        ownerUnitPrice: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        freight: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        endTime: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        finishTime: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        shippedTime: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        driverId: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        appointSupplierId: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        },],
        description: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        categoryId: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        lineId: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        fleetType: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        },],
        supplierMoney: [{
          required: true,
          message: "请保持信息完整",
          trigger: "blur"
        }],
        typeDate: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        }],
        pointTime: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        }],
        weekDay: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        }],
        MonthDate: [{
          required: true,
          message: "请保持信息完整",
          trigger: "change"
        }]
      },
      formData: {
        pointTime: '',//时间点
        weekDay: '',//每周星期几
        typeDate: '',//每周/每月
        MonthDate: '',//每月 多少号

        ownerId: "", //货主ID
        projectId: "", //项目ID
        pricingMethod: "", //计价方式
        ownerProject: "", //计划名称
        measureUnit: "", //计量单位
        cargoWeight: "", //运量
        unitPrice: "", //承运方单价
        totalAmount: "", //货主金额
        ownerUnitPrice: "", //货主单价
        freight: "", //承运人金额
        endTime: "", //截止时间
        finishTime: "", //送达时间
        shippedTime: "", //发货时间
        driverId: "", //承运方Id
        description: "", //订单备注描述
        carTypeNeeds: "", //车型需要Id
        lineId: "", //线路ID
        startAddress: [], //发货地
        endAddress: [], //目的地
        appointSupplierId: "", //车队id
        fleetId: "", //车队id
        fleetType: "", //车队类型
        supplierMoney: "",//车队运费
        //调度司机集合
        orderDispatches: [{
          cargoWeight: "", //运量
          driverId: "", //司机Id
          freight: "", //司机运费
          unitPrice: "", //司机单价
        },],
        allotState: "0", //是否调度司机
      },
      creadMood: [],
      CarData: "",
      diverMood: "",
      start: [{
        address: "",
        name: "",
        phone: "",
        lat: "",
        lng: "",
      },],
      end: [{
        address: "",
        name: "",
        phone: "",
        lat: "",
        lng: "",
        orderCargoDetails: [],
      },],
      iframeWin: {}, //Map返回值
      SatrIndex: 0,
      EndIndex: 0,
      compute: false,
      fleetName: "", //车队输入框
      orderId: this.$route.query.id,
      issubmit: false, // 是否提交 用于保存

      measureUnitArr: [{
        label: "车",
        value: "1"
      },
      {
        label: "吨",
        value: "2"
      },
      {
        label: "件",
        value: "3"
      },
      {
        label: "KG",
        value: "4"
      },
      {
        label: "箱",
        value: "5"
      },
      {
        label: "托",
        value: "6"
      },
      {
        label: "台",
        value: "7"
      },
      {
        label: "方",
        value: "8"
      },
      ],

      tijiao: "",
      attachment: "",
      remark: "", //反馈备注
    };
  },
  created() {
    for (let i = 1; i < 29; i++) {
      this.MonthDateArr.push({ value: i + '号', label: i + '号' })
    }

    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
    this.cread();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.attachment = res.data.url;
      let index = this.attachment.lastIndexOf(".") + 1;
      this.suffixName =
        "附件." + this.attachment.substring(index, this.attachment.length);
    },
    beforeAvatarUpload(file) { },
    tableHeaderStyle({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;";
    },
    tableHeaderStyle2({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F0F6FC;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;";
    },
    rowStyle({
      row,
      rowIndex
    }) {
      return "tableRowStyleName";
    },
    // 计量单位变化时,表格的单位也变化
    changeMeasureUnit(val) {
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        item.measureUnit = this.formData.measureUnit;
      });
    },
    serMap() {
      let dataMap = this.$refs.iframe.contentWindow.ToManualRoamFunc();
      this.DialogMap = false;
      if (this.judgment == 0) {
        for (let k in dataMap) {
          this.start[this.SatrIndex][k] = dataMap[k];
        }
      } else {
        for (let k in dataMap) {
          this.end[this.EndIndex][k] = dataMap[k];
        }
      }
    },
    //添加地址
    AddMap(e, i, z) {
      let that = this;
      if (i == 0) {
        this.SatrIndex = e;
      } else {
        this.EndIndex = e;
      }
      this.judgment = i;
      this.DialogMap = true;
      setTimeout(() => {
        that.$refs.iframe.contentWindow.VueMap(z);
      }, 1000);
    },

    //删除地址
    DeletCargo(e, i) {
      if (i == 0) {
        this.start.forEach((item, i) => {
          if (i == e) {
            this.start.splice(i, 1);
          }
        });
      } else {
        this.end.forEach((item, i) => {
          if (i == e) {
            this.end.splice(i, 1);
          }
        });
      }
    },
    //追加地址数据
    addCargo(e) {
      if (e == 0) {
        this.start.push({
          address: "",
          name: "",
          phone: "",
        });
      } else {
        this.end.push({
          address: "",
          name: "",
          phone: "",
          orderCargoDetails: [],
        });
      }
    },

    //货物明细
    cargoVisible(e) {
      this.EndIndex = e;
      this.cargoDetailsVisible = true;
    },
    //下载模板
    Download() {
      const a = document.createElement("a");
      a.href = "/huowu.xlsx";
      a.download = "huowu.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    //添加货物
    AddHuo() {
      this.end[this.EndIndex].orderCargoDetails.push({
        cargoType: "", //大类
        cargoName: "", //名称
        cargoWeight: "", //运量cargoWeight
        measureUnit: "吨", //运量单位
        brand: "", //品牌
        cargoVolume: "", //规格
        cargoQuantity: "", //货物数量
        description: "", //备注
      });
    },
    //删除货物行
    DeleteIndex(e) {
      this.end[this.EndIndex].orderCargoDetails.forEach((item, i) => {
        if (i == e) {
          this.end[this.EndIndex].orderCargoDetails.splice(i, 1);
        }
      });
    },
    //导入excel文档
    upload(file, fileList) {
      let files = {
        0: file
      };
      this.readExcel1(files);
    },
    //司机详情信息
    async diverShow(e) {
      let res = await this.$http.selfOperatedOrderApi.queryDriverAndVehicleDetail({
        driverId: e,
      });
      this.diverMood = res.data.data;
    },
    // 获取导入excel文档的数据
    readExcel1(files) {
      var that = this;
      ////console.log(files);
      // 此处判断不严谨，思路只是根据传入的参数校验数据的完整性，可根据自己需求修改
      // 如果没有文件名
      if (files.length <= 0) {
        return;
      }
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0];
          const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
          let cont = JSON.stringify(ws)
            .replace(/大类/g, "cargoType")
            .replace(/货物名称/g, "cargoName")
            .replace(/运量单位/g, "measureUnit")
            .replace(/运量/g, "cargoWeight")
            .replace(/品牌/g, "brand")
            .replace(/规格/g, "cargoVolume")
            .replace(/数量/g, "cargoQuantity")
            .replace(/备注/g, "description");
          this.end[this.EndIndex].orderCargoDetails = JSON.parse(cont);
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    clearSelectline() {
      this.searchLineName = "";
      this.Selectline();
    },
    //拿线路信息
    async Selectline() {
      if (!this.formData.ownerId) {
        this.$message.error("请先选择货主");
        return false;
      }
      let res = await this.$http.orderApi.userLineDownList({
        ownerId: this.formData.ownerId,
        lineName: this.searchLineName,
      });
      this.Linemood = res.data.data;
      this.DialogLine = true;
    },
    //选择线路详情
    async LineXuan(e) {
      this.formData.lineId = e.lineId;
      this.ShippingReceivingInfoForm.selection = e.lineName;
      let res = await this.$http.orderApi.userLineAddressList({
        lineId: this.formData.lineId,
      });
      let mood = JSON.parse(JSON.stringify(res.data.data));
      this.start = mood.startAddress;
      this.end = mood.endAddress;
      this.end.forEach((item) => {
        item.orderCargoDetails = [];
      });
      this.end = JSON.parse(JSON.stringify(this.end));
      this.DialogLine = false;
    },

    //拿车型信息
    changeArr(e) {
      this.CarData = this.creadMood[e];
      this.formData.carTypeNeeds = this.creadMood[e].categoryId + "";
    },

    qyxz(val) {
      // 搜索查询
      if (val == "货主信息") {
        this.Selectcargoe(); //货主信息查询
      } else if (val == "接单人信息") {
        this.AcceptListFleet();
      } else if (val == "项目信息") {
        this.Selectitem(); //项目信息查询
      } else if ((val = "车队信息")) {
        this.SelectFeet();
      }
    },
    //拿货主信息
    async Selectcargoe() {
      let res = await this.$http.orderApi.dropDownByOrder({
        name: this.CargoOwnerValue,
      });
      this.cargoemood = res.data.records;
      this.DialogVisible = true;
    },
    //选择货主
    cargoeXuan(e) {
      this.transactionForm.huozhu = e.name;
      this.formData.ownerId = e.ownerId;
      this.DialogVisible = false;

      this.CargoOwnerValue = "";
    },

    //拿项目信息
    async Selectitem() {
      if (!this.transactionForm.huozhu) {
        this.$message.error("请先选择货主");
        return false;
      }
      let res = await this.$http.orderApi.project_down({
        ownerId: this.formData.ownerId,
        name: this.projectNameValue,
      });
      this.itemmood = res.data.records;

      this.DialogItem = true;
    },
    //选择项目
    ItemXuan(e) {
      this.transactionForm.name = e.name;
      this.formData.projectId = e.projectId;
      this.DialogItem = false;
      this.projectNameValue = "";
    },
    changefleettype() {
      this.formData.driverId = "";
      this.transactionForm.Carrier = "";
      this.formData.unitPrice = "";
      this.formData.freight = "";
      this.transactionForm.feetName = "";
      this.formData.appointSupplierId = "";
    },
    async SelectFeet() {
      // if (!this.formData.fleetType) {
      // 	this.$message.error("请选择车队类型");
      // 	return;
      // }
      let parmas = {
        fleetName: this.fleetNameValue,
      };

      // 选择车队
      // if (this.formData.fleetType == 1) {
      // 	let res = await this.$http.orderApi.dropDownFleet(parmas);
      // 	this.DialogAcceptmood = res.data.data.records;
      // } else {
      // 	let res1 = await this.$http.fleetManagementApi.queryExternalFleet({});
      // 	let cont = res1.data.data;
      // 	let mood = [];
      // 	cont.forEach((item, i) => {
      // 		mood.push({
      // 			fleetName: item.fleet_name,
      // 			fleetId: item.fleet_id
      // 		});
      // 	});
      // 	this.DialogAcceptmood = mood;
      // }
      let res = await this.$http.orderApi.queryAllFleet(parmas);
      let mood = [];
      let cont = res.data.data.nfleet;
      let cont1 = res.data.data.wfleet;
      cont.forEach((item, index) => {
        var d = {
          fleetName: item.fleetName,
          fleetId: item.fleetId,
          index: 1
        }
        mood.push(d)
      })
      cont1.forEach((item, index) => {
        var d1 = {
          fleetName: item.fleet_name,
          fleetId: item.fleet_id,
          index: 2
        }
        mood.push(d1)
      })
      this.DialogAcceptmood = mood;
      this.DialogFleet = true;
    },
    //选择车队
    async AcceptListFleet(e) {
      this.fleetNameValue = "";
      if (e != undefined) {
        this.formData.appointSupplierId = e.fleetId;
        this.formData.driverId = "";
        this.transactionForm.Carrier = "";
        this.formData.unitPrice = "";
        this.formData.freight = "";
      }
      this.formData.fleetType = e.index
      this.transactionForm.feetName = e.fleetName;
      this.DialogFleet = false;
      ////console.log(res.data);
    },
    clear() {
      this.formData.driverId = "";
      this.transactionForm.Carrier = "";
      this.formData.unitPrice = "";
      this.formData.freight = "";
    },

    //*接单人信息
    async SelectAccept() {
      if (!this.formData.appointSupplierId) {
        this.$message.error("请选择车队");
        return;
      }
      let parmas = {
        fleetId: this.formData.appointSupplierId,
        driverName: this.driverNameValue,
      };
      let res = await this.$http.orderApi.dropDownDriver(parmas);
      this.Acceptmood = res.data.data;
      this.DialogAcceptList = true;
    },
    AcceptListXuan(e) {
      this.transactionForm.Carrier = e.driverName;
      this.formData.driverId = e.driverId;
      this.DialogAcceptList = false;
      this.driverNameValue = "";
    },
    async queryDriver() {
      let parmas = {
        fleetId: this.formData.appointSupplierId,
        driverName: this.driverNameQuery,
      };
      let res = await this.$http.orderApi.dropDownDriver(parmas);
      this.driverDetailsData = res.data.data;
    },
    //外部司机选择
    async showAddDriverDialog() {
      if (!this.formData.appointSupplierId) {
        this.$message.error("请先选择承运方");
        return false;
      }
      let parmas = {
        fleetId: this.formData.appointSupplierId,
        driverName: this.driverNameValue,
      };
      let res = await this.$http.orderApi.dropDownDriver(parmas);
      this.addDriverVisible = true;
      this.driverDetailsData = res.data.data;
      let that = this;
      setTimeout(() => {
        that.driverDetailsData.forEach((row, i) => {
          that.SchedulingForm.DispatchingDriver.forEach((item, i) => {
            if (row.driverId == item.driverId) {
              that.$refs.registTable.toggleRowSelection(row);
            }
          });
        });
      }, 1000);
    },

    //选择司机确认
    driverVerify() {
      this.addDriverVisible = false;
      this.SchedulingForm.DispatchingDriver = [];
      this.SchedulingForm.DispatchingDriver = this.$refs.registTable.selection;
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        this.SchedulingForm.DispatchingDriver[i].cargoWeight = "";
        this.SchedulingForm.DispatchingDriver[i].freight = "";
        this.SchedulingForm.DispatchingDriver[i].unitPrice = "";
        this.SchedulingForm.DispatchingDriver[i].measureUnit =
          this.formData.measureUnit;
      });
      this.SchedulingForm.DispatchingDriver = JSON.parse(
        JSON.stringify(this.SchedulingForm.DispatchingDriver)
      );
    },

    // 表格合计
    getSummaries(param) {
      const {
        columns,
        data
      } = param;
      const sums = [];

      if (param.columns.length == 0) {
        return;
      }
      // //console.log("param", param);

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        //8列   序号 1列 2 4 7 不参与合计 单元内容返回 return 空显示
        if (index === 1 || index === 2 || index === 4 || index === 7) {
          sums[index] = "";
          return;
        }

        // //console.log("123", column.property);
        // 遍历运量 司机单价 司机运费 字符串转Number
        //遍历列表 转换输入框的值为 Number
        const values = data.map((item) => {
          // //console.log("值", item[column.property]);
          return Number(item[column.property]); //返回 数字 数据 到values数组
        });

        // //console.log("values", values);
        //   every()方法会遍历数组的每一项，如果有有一项不满足条件，则表达式返回false,剩余的项将不会再执行检测；如果遍历完数组后，每一项都符合条，则返回true。
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (index == 3) {
            // //console.log("运量");
            if (sums[index] > this.formData.cargoWeight) {
              sums[index] = "分配的运量超出总运量";
              this.compute = false;
              return sums;
            } else {
              this.compute = true;
              sums[index] += 0;
              return sums;
            }
          }
          // //console.log(sums[index]);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },

    // 计算司机金额
    CalculationResults(val) {
      if (val.unitPrice != "" && val.cargoWeight != "") {
        val.freight = val.unitPrice * val.cargoWeight;
      }
    },

    async cread() {
      let res = await this.$http.orderApi.get_vehicle_model_list();
      let mood = res.data.data.homeVehicleModelVoList;
      this.carTypeArr = [];
      this.creadMood = mood;
      mood.forEach((item, i) => {
        this.carTypeArr.push({
          value: i,
          label: item.name
        });
      });
      if (this.orderId) {//修改订单回填数据
        let res1 = await this.$http.selfOperatedOrderApi.planManagementDetails(this.$route.query.id);
        this.transactionForm.huozhu = res1.data.data.cargoName;
        this.transactionForm.name = res1.data.data.projectName;
        this.transactionForm.feetName = res1.data.data.fleetName;
        this.ShippingReceivingInfoForm.selection = res1.data.data.lineName;
        this.start = res1.data.data.startAddress;
        this.end = res1.data.data.endAddress;
        for (let k in res1.data.data) {
          this.formData[k] = res1.data.data[k];
        }
        this.formData.orderId = this.orderId;
        // pointTime:'',//时间点
        // weekDay: '',//每周星期几
        // typeDate:'',//每周/每月
        // MonthDate:'',//每月 多少号
        this.formData.typeDate = res1.data.data.weekMonth
        if (this.formData.typeDate == '周') {
          this.formData.weekDay = res1.data.data.weekMonthDate
        } else if (this.formData.typeDate == '月') {
          this.formData.MonthDate = res1.data.data.weekMonthDate
        }
        this.formData.pointTime = res1.data.data.detailTime

        this.creadMood.map((item, index) => {
          if (item.categoryId == this.formData.categoryId) {
            this.SchedulingForm.carType = index;
            this.changeArr(index);
          }
        });

        if (this.formData.orderType == 3) {
          this.formData.fleetType = 2
          if (this.formData.allotState == 1) {
            this.SchedulingForm.DispatchingDriver = this.formData.orderDispatches;

          }
        } else {
          this.formData.fleetType = 1
          this.transactionForm.Carrier =
            res1.data.data.orderDispatches[0].driverName;
          this.formData.driverId = this.formData.orderDispatches[0].driverId;
          this.SchedulingForm.DispatchingDriver = this.formData.orderDispatches;
        }
      } else {
        if (this.$store.state.orderData) {
          let orderData = this.$store.state.orderData;
          this.formData = orderData.formData;
          this.transactionForm = orderData.transactionForm;
          this.SchedulingForm = orderData.SchedulingForm;
          this.ShippingReceivingInfoForm = orderData.ShippingReceivingInfoForm;
          this.start = orderData.start;
          this.end = orderData.end;
          if (this.formData.carTypeNeeds) {
            this.creadMood.map((item, index) => {
              if (item.categoryId == this.formData.carTypeNeeds) {
                this.SchedulingForm.carType = index;
                this.changeArr(index);
              }
            });
          }
        }
      }
    },

    // 添加调度司机
    addDispatchDriver(e) {
      // 发货地
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        if (i == e) {
          this.SchedulingForm.DispatchingDriver.splice(i, 1);
        }
      });
    },
    deleteDriver(index) {
      this.addRouteForm.destinationPlaceTable.splice(index, 1);
    },

    submit() {
      this.$refs["transactionForm"].validate((valid) => {
        if (valid) {
          this.$refs["SchedulingForm"].validate((valid) => {
            if (valid) {
              // 提交表单
              switch (this.type) {
                case 2:
                  let jingao = false;
                  this.start.forEach((item) => {
                    for (let k in item) {
                      if (k == "address" || k == "contact" || k ==
                        "phone") {
                        //console.log(item[k]);
                        if (!item[k]) {
                          jingao = true;
                        }
                      }
                    }
                  });
                  this.end.forEach((item) => {
                    for (let k in item) {
                      if (k == "address" || k == "contact" || k ==
                        "phone") {
                        if (!item[k]) {
                          jingao = true;
                        }
                      }
                    }
                  });

                  if (jingao) {
                    this.$message.error("请填写完整地址");
                    return false;
                  }
                  break;
              }

              let data = JSON.parse(JSON.stringify(this.formData));
              data.startAddress = JSON.parse(JSON.stringify(this.start));
              data.endAddress = JSON.parse(JSON.stringify(this.end));
              if (this.formData.fleetType == 2) {
                data.fleetId = data.appointSupplierId;
                let cont = [];
                this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
                  cont.push({
                    driverName: item.driverName,
                    vehicleInfo: item.vehicleInfo,
                    unitPrice: item.unitPrice,
                    measureUnit: item.measureUnit,
                    freight: item.freight,
                    driverId: item.driverId,
                    cargoWeight: item.cargoWeight,
                  });
                });
                let dirver = [];
                cont.forEach((item, i) => {
                  dirver.push(item.driverId);
                });
                dirver = Array.from(new Set(dirver));
                data.driverId = dirver.join(",");
                if (data.allotState == 1) {
                  data.orderDispatches = cont;
                } else {
                  data.orderDispatches = [];
                  data.allotState = 0;
                  data.driverId = "";
                  this.compute = true;
                }
              }
              if (this.orderId) {
                data.planOrderId = data.orderId
                data.weekMonth = data.typeDate
                data.weekMonthDate = data.typeDate == '周' ? data.weekDay : data.MonthDate
                data.detailTime = data.pointTime
                this.$http.selfOperatedOrderApi.planManagementEdit(data).then((res1) => {
                  if (res1.data.code == 200) {
                    this.$message.success("修改成功");
                    this.issubmit = true;
                    this.$router.push("/home/selfOperatedOrder/planManagement");
                  }
                });
              } else if (this.type == 2) {
                if ((this.attachment == "") & (this.remark == "")) {
                  this.$message.error("驳回编辑后，文件或者备注必传");
                  return false;
                }
                let updata = {
                  ownerId: "", //货主ID
                  projectId: "", //项目ID
                  pricingMethod: "", //计价方式
                  ownerProject: "", //计划名称
                  measureUnit: "", //计量单位
                  cargoWeight: "", //运量
                  unitPrice: "", //承运方单价
                  totalAmount: "", //货主金额
                  ownerUnitPrice: "", //货主单价
                  supplierMoney: "",//车队运费
                  freight: "", //承运人金额
                  orderId: this.orderId,
                };
                for (let k in updata) {
                  updata[k] = data[k];
                }
                updata.attachment = this.attachment;
                updata.remark = this.remark;
                this.$http.orderApi.platformOrderupdate(updata).then((res3) => {
                  if (res3.data.code == 200) {
                    this.$message.success("修改成功");
                    this.issubmit = true;
                    this.$router.push("/home/selfOperatedWaybill/list");
                  }
                });
              } else {
                //console.log(data)
                // data.weekMonth=data.pointTime
                data.weekMonth = data.typeDate
                data.weekMonthDate = data.typeDate == '周' ? data.weekDay : data.MonthDate
                data.detailTime = data.pointTime

                this.$http.selfOperatedOrderApi.planManagementAdd(data).then((res2) => {
                  if (res2.data.data.code == 200) {
                    this.$message.success("提交成功");
                    this.issubmit = true;
                    // this.$store.commit("saveCreateOrder", null);
                    this.$router.push("/home/selfOperatedOrder/planManagement");
                  }
                });
              }
            } else {
              this.$message.error("请填写调度信息必填项");
              return false;
            }
          });
        } else {
          this.$message.error("请填写交易信息必填项");
          return false;
        }
      });
    },
  },
  mounted() { },
  beforeDestroy() {
    if (this.orderId || this.issubmit) {
      return;
    }
    let orderData = {
      formData: this.formData,
      transactionForm: this.transactionForm,
      SchedulingForm: this.SchedulingForm,
      ShippingReceivingInfoForm: this.ShippingReceivingInfoForm,
      start: this.start,
      end: this.end,
    };
    this.$store.commit("saveCreateOrder", orderData);
  },
  components: {
    breadcrumb,
    titleBgVue,
  },
};
</script>

<style lang="scss" scoped>
.waiFleet {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: #409EFF;
  color: #ffffff;
  line-height: 18px;
  text-align: center;
  border-radius: 20px;
  margin-left: 5px;
}

.controlLine {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.pointerStyle {
  &:hover {
    transition: 0.2s;
    cursor: pointer;
    opacity: 0.8;
  }
}

.reddian {
  ::v-deep .el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}

.beforeRedDian:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.Box {
  background-color: #fff;

  .header {
    height: 50px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding-left: 24px;
  }

  .main {
    padding: 34px 24px 52px;
    height: calc(100vh - 212px);
    overflow-y: scroll;

    .main_item {
      .titleBox {
        display: flex;
        background-color: #f8f8f8;
        height: 40px;

        .shuxian {
          height: 14px;
          width: 3px;
          background-color: #1890ff;
          margin: 13px 6px 13px 12px;
        }

        .title {
          color: #262626;
          font-size: 13px;
          font-weight: bold;
          line-height: 40px;
        }
      }

      ::v-deep .el-form-item__label {
        color: #262626;
        font-size: 12px;
        font-weight: bold;
        // height:32px;
        // line-height: 40px;
      }

      .formItem {
        padding-top: 28px;

        .input_form {
          ::v-deep .el-select {
            width: 100%;
          }
        }

        //选择车型
        .carTypeSelect {
          ::v-deep .el-select {
            width: 240px;
          }

          // 车辆照片
          .carPicBox {
            position: absolute;
            top: calc(100% + 8px);
            width: 240px;
            height: 161px;
            margin: 0 auto;

            .imgBg {
              background-color: #f5f5f5;
              width: 240px;
              height: 105px;

              .carPic {
                width: 240px;
                height: 105px;
                display: block;
              }
            }

            .infoBox {
              padding-top: 13px;
              border: 1px solid #f0f0f0;
              height: 56px;
              display: flex;
              justify-content: space-around;

              .info_item {
                display: flex;
                flex-direction: column;

                .info_item_tit {
                  color: #949494;
                  font-size: 12px;
                  line-height: 16px;
                }

                .text {
                  color: #262626;
                  font-size: 12px;
                  line-height: 16px;
                }
              }
            }
          }
        }

        // 订单备注
        .notesInput {
          width: 240px;
        }

        .addDriverBox {
          background-color: #f8f8f8;
          width: 100%;
          padding: 0 17px 19px;

          .addDriverBox_head {
            width: 100%;
            height: 57px;
            display: flex;
            align-items: center;

            .addDriverBtn {
              background-color: #1890ff;
              border-radius: 4px;
              height: 32px;
              width: 105px;
              color: #ffffff;
              font-size: 12px;
              padding: 8px 17px 9px 17px;
              transition: 0.2s;
              cursor: pointer;
              margin-right: 17px;

              .iconBtn {
                margin-right: 7px;
                font-size: 15px;
              }

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
  }
}

.footerControlBox {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 300;
  bottom: -16px;
  left: -16px;
  justify-content: center;
  height: 60px;
  width: calc(100% + 32px);
  background-color: #fff;
  margin-top: 28px;

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 16px;

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  &:hover {
    opacity: 0.8;
    transition: 0.2;
  }
}

// 添加司机对话框
.addDriver_dialog {
  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn2 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2;
      }
    }

    .submitBtn2 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 31px 40px 24px 40px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .titleBox {
    display: flex;
    margin-bottom: 17px;

    .title {
      color: #262626;
      font-size: 12px;
    }
  }

  .dialog_list {
    border: 1px solid #f0f0f0;
    border-bottom: none;

    .driverPicBox {
      height: 48px;
      width: 65px;
      background-color: #f1f0f0;

      .driverImg {
        height: 48px;
        width: 65px;
      }
    }

    .driverNameBox {
      display: flex;

      .driverName {
        color: #595959;
        font-size: 12px;
        margin-right: 5px;
      }

      .icon-info {
        font-size: 13px;
        color: #595959;
      }
    }

    // 表头样式
    ::v-deep .el-table__header th {
      padding: 8px 0;
    }

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #262626;
        font-size: 12px;
      }
    }

    // 表身体
    ::v-deep .el-table__row {
      height: 76px;
    }

    ::v-deep .el-table-column--selection .cell {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}

// 货物明细弹框
.cargoDetails_dialog {
  .head {
    .importBtn {
      margin-bottom: 9px;
      width: 120px;
      height: 36px;
      background-color: #1890ff;
      color: #fff;
      font-size: 12px;

      &:hover {
        opacity: 0.8s;
        transition: 0.2s;
      }
    }
  }

  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn3 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }
    }

    .submitBtn3 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 22px 32px 24px 32px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .cargoDetails_table {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }
}

.flex-fpkp {
  display: flex;
  margin-bottom: 15px;
}

.cxbt {
  margin-left: 20px;
}
</style>

<style lang="scss">
// 司机信息和车辆信息
.BulletBox {
  padding: 18px 12px;

  >.info_item {
    >.titleBox {
      display: flex;
      align-items: center;
      margin-bottom: 14px;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >.title {
        color: #262626;
        font-size: 14px;
        margin-right: 14px;
      }

      >.line {
        height: 1px;
        flex: 1;
        background-color: #f0f0f0;
      }
    }
  }
}

.null-png {
  height: 300px;
  width: 100%;
  font-weight: 600;
  display: flex;
  justify-content: center;
}

.null-png div {
  text-align: center;
}

.fpkp-dialog {
  padding-bottom: 30px;
}

.importBtn1 {
  width: 120px;
  font-size: 12px;
}
</style>

<style lang="scss">
.tableRowStyleName {
  color: #262626 !important;
  font-size: 12px;
}
</style>